<!--
 * @Author: WeijianXu weijian.xu@unidt.com
 * @Date: 2024-02-19 17:46:31
 * @LastEditors: WeijianXu weijian.xu@unidt.com
 * @LastEditTime: 2024-02-27 11:39:02
 * @FilePath: \demo\bmap\test.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		.toolbar {
			width: 80%;
			margin: 0 auto;
			position: absolute;
			bottom: 10px;
			left: 10%;
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.toolbar .row {
			padding: 10px;
			color: #ee8833;
			background-color: rgba(255, 255, 255, 0.3);
		}

		.toolbar .col {
			text-align: center;
			margin-bottom: 10px;
		}

		.toolbar .col:last-child {
			margin-bottom: 0;
		}

		.toolbar .col span {
			text-align: center;
			margin-left: 20px;
		}

	</style>
	<script type="text/javascript"
		src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=1CzvpATwmLOvnXzO0nFaHxnqEQ7oAsEj"></script>
	<title>地图展示</title>
</head>

<body>
	<div id="allmap"></div>
	<div class="toolbar">
		<div class="row">
			<div class="col">
				<span>风格：</span>
				<select id="maptype" onchange="setMapType()">
					<option value="BMAP_NORMAL_MAP" selected>普通地图</option>
					<option value="BMAP_EARTH_MAP">地球模式</option>
					<option value="BMAP_SATELLITE_MAP">卫星地图</option>
				</select>
				<select id="customStyle" onchange="setMapStyle()">
					<option value="0">默认样式</option>
					<option value="1" selected>绿野仙踪</option>
				</select>

				<span>中心点：</span>
				<select id="centerPoint" onchange="setCenterPoint()">
					<option value="">请选择</option>
					<option value="1">默认样式</option>
					<option value="2">3D效果</option>
				</select>

				<span>边界：</span>
				<select id="boundary" onchange="drawBoundary()">
					<option value="">请选择</option>
					<option value="上城区">上城区</option>
					<option value="萧山区">萧山区</option>
					<option value="西湖区">西湖区</option>
					<option value="余杭区">余杭区</option>
					<option value="拱墅区">拱墅区</option>
					<option value="滨江区">滨江区</option>
					<option value="临平区">临平区</option>
					<option value="富阳区">富阳区</option>
					<option value="钱塘区">钱塘区</option>
				</select>
				<button id="boundary3D" onclick="draw3DBoundary()">3D边界</button>

				<span>覆盖物与装饰：</span>
				<select id="overlay" onchange="drawOverlay()">
					<option value="">请选择</option>
					<option value="Poly">多边形</option>
					<option value="WestLakeGround">西湖贴图</option>
					<option value="CustomOverlay">着火点(自定义)</option>
				</select>
			</div>
			<div class="col">
				<span>视角动画：</span>
				<button id="reset" onclick="startAnimation()">开始</button>
				<button id="clear" onclick="endAnimation()">结束</button>
			</div>
			<div class="col">
				<button id="reset" onclick="reset()">重置</button>
				<button id="clear" onclick="clearAll()">清除</button>
			</div>
		</div>

	</div>
	<script type="text/javascript" src="./test.js"></script>
	<script type="text/javascript" src="./animation.js"></script>
</body>

</html>
